<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在线投票系统</title>
<link type="image/x-icon" href="images/yc.png" rel="shortcut icon"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="app"> 
<div id="header" class="wrap">
	<img src="images/logo.gif" />
</div>
<div id="navbar" class="wrap">
	<div class="profile">
		<b v-if="loginStatus">您好，{{user.uname}}</b>
		<b v-else><a href="login.html">请先登录</a></b>
		<span class="return"><a href="back/view.html">返回列表</a></span>
		<span class="addnew"><a href="back/add.html">添加新投票</a></span>
		<span class="modify"><a href="manage.html">维护</a></span>
		
	</div>
	<div class="search">
		<form method="post" action="Subject!search.action">
			<input type="text" name="keywords" class="input-text" value=""/><input type="submit" name="submit" class="input-button" value="" />
		</form>
	</div>
</div>

<div id="vote" class="wrap">
	<h2>投票列表</h2>
	<ul class="list">
		<li v-for="(item, index) in topics" :class="{odd: index % 2 == 0}">
			<div v-if="item.status == 1">
				<h4><a href="javascript:void(0)">{{item.tname}}</a></h4>
				<div class="join"><a href="javascript:void(0)">暂未开始</a></div>
				<p class="info">共有 {{item.nums}}个选项，已有{{item.count}} 个网友参与了投票。</p>			
			</div>
			<div v-else-if="item.status == 2 || item.status == 3">
				<h4><a :href="'back/view.html?' + item.tid">{{item.tname}}</a></h4>
				<div class="join"><a :href="'back/view.html?' + item.tid">查看结果</a></div>
				<p class="info">共有 {{item.nums}} 个选项，已有{{item.count}} 个网友参与了投票。</p>			
			</div>
			<div v-else>
				<h4><a :href="'back/vote.html?' + item.tid">{{item.tname}}</a></h4>
				<div class="join"><a :href="'back/vote.html?' + item.tid">参与投票</a></div>
				<p class="info">共有 {{item.nums}}个选项，已有{{item.count}} 个网友参与了投票。</p>			
			</div>
		</li>
	</ul>
</div>
<div id="footer" class="wrap">
	源辰信息 &copy; 版权所有
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" >
let app = new Vue({
	el: "#app",
	data:{
		topics: [],
		user: {},
		loginStatus: false
	},
	mounted: function(){
		axios.get("user/check").then(rt => {
			if(rt.status == 200 && rt.data.code == 200){
				this.user = rt.data.data;
				this.loginStatus = true;
			}else{
				this.loginStatus = false;
			}
			this.search();
		})
	},
	methods:{
		search: function(){
			axios.get("topic/finds").then(rt => {
				if(rt.status == 200 && rt.data.code == 200){
					console.info(rt.data.data);
					this.topics = rt.data.data;
					
					if(this.loginStatus){
						this.topics.forEach(function(item, index){
							if(item.usids){ // 说明有人投票
								let temp = item.usids.split(","); // 把投票用户分割成数组
								if($.inArray(String(app.$data.user.usid), temp) >= 0){
									item.status = 3; // 已投票 
								}
							}
						})
					}
				}
			})
		}
	}
})
</script>
</body>
</html>
